<template>
  <div class="box">
    <div class="box1" v-for="(item, index) in list" :key="index">
      
        <div class="box2">
          <div class="tp">
            <img :src="item.tp" alt="" />
          </div>
          <div class="txt">
            <span>{{ item.txt }}</span>
          </div>
        </div>
      
    </div>
  </div>
</template>

<script>
export default {
  name: "",

  data() {
    return {
      list: [
        {
          tp: "https://p0.meituan.net/imeituanbusiness/4579713360f6b07c482d475606dcdaf32232.png",
          txt: "美食",
        },
        {
          tp: "https://p0.meituan.net/imeituanbusiness/982e9a55410baae204a220840b11cc952772.png",
          txt: "猫眼电影",
        },
        {
          tp: "https://p0.meituan.net/imeituanbusiness/ea0c6fab93f5070dfc7baa50ac9052a02300.png",
          txt: "酒店",
        },
        {
          tp: "	https://p0.meituan.net/imeituanbusiness/7b30434d02d20c4e0428cbc2091499f22631.png",
          txt: "休闲娱乐",
        },
        {
          tp: "	https://p0.meituan.net/imeituanbusiness/f8fc99f79983d96a12889d00ad4df41a2868.png",
          txt: "外卖",
        },
        {
          tp: "	https://p0.meituan.net/imeituanbusiness/982e9a55410baae204a220840b11cc952772.png",
          txt: "KTV",
        },
        {
          tp: "https://p0.meituan.net/imeituanbusiness/586d25e7f9615a91b831713c5b68fdd62345.png",
          txt: "周边游",
        },
        {
          tp: "	https://p0.meituan.net/imeituanbusiness/862a8ecbcaec80cc827090074c358f882565.png",
          txt: "丽人",
        },
        {   
         tp: "	https://p0.meituan.net/imeituanbusiness/7b30434d02d20c4e0428cbc2091499f22631.png",
          txt: "母婴亲子",
        },
        {
        tp: "	https://p0.meituan.net/imeituanbusiness/862a8ecbcaec80cc827090074c358f882565.png",
        txt: "全部分类",
        },
      ],
    };
  },

  mounted() {},

  methods: {},
};
</script>

<style scoped>
.box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.box1 {
  display: flex;
  justify-content: space-between;
}

img {
  width: 100%;
  height: 100%;
}

.tp {
  width: 130px;
  height: 130px;
}

.txt {
  text-align: center;
  font-size: 25px;
}
</style>